<template>
<div class="sider">
  <h3 class="title">管理目录</h3>
  <router-link to="/" class="item"><span @click="to">签到查询</span></router-link>
  <router-link to="/face" class="item"><span @click="to">学生签到</span></router-link>
  <router-link to="/referring" class="item"><span @click="to">人脸信息注册</span></router-link>
  <router-link to="/echart" class="item"><span @click="to">数据分析</span></router-link>
  <div class="item" @click="logout">退出</div>
</div>
</template>

<script>
export default {
  name: 'TheSider',
  methods: {
    to() {
      this.$emit('change-show-sider')
    },
    logout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
      this.$emit('change-show-sider')
    }
  }
}
</script>

<style lang="scss" scoped>
.sider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 150px;
  height: 100vh;
  border-radius: 0 5px 5px 0;
  background-color: #fff;
  transition: all 1s;

  .title {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: $font-size-medium;
  }

  .item {
    display: block;
    text-decoration: none;
    padding: 10px 0 10px 40px;
    font-size: $font-size-medium-s;
    color: #303133;
  }

  .router-link-active {
    color: #f00;
  }
}
</style>
